<template>
  <div v-for="(user, index) in props.userList" :key="index">
    <van-skeleton
        v-if="props.loading"
        title
        avatar
        :row="3"
        :loading="props.loading"
    />
    <van-card
        v-else
        :tag="user.id as string"
        :desc="user.profile"
        :title="`${user.username}（${user.planetCode}）`"
        :thumb="user.avatarUrl"
    >
      <template #tags>
        <van-tag plain type="primary" v-for="tag in user.tags" style="margin-right: 8px;margin-top: 8px">
          {{ tag }}
        </van-tag>
      </template>
      <template #footer>
        <van-button size="mini">联系我</van-button>
      </template>
    </van-card>
  </div>
</template>

<script setup lang="ts">
import {UserType} from "../models/user";

interface UserCardListProps {
  userList: UserType[];
  loading: boolean;
}

const props = withDefaults(defineProps<UserCardListProps>(), {
  loading: false,
  userList: () => []
})
</script>

<style scoped>

</style>
